<template>
  <container-item-wrapper :widget="widget">

    <div :key="widget.id" class="el-drawer-item">
      <el-drawer :visible.sync="visible"
                 @close="close"
                 :title="options.label"
                 v-bind="options.attributeEDR">
        <div style="position: relative" slot="title">
          {{ options.label }}

          <span class="fullscreen" v-if="options.attributeEDR.fullscreen">
                        <i class="el-icon-full-screen" v-if="options.attributeEDR.size!=='100%'"
                           @click="options.attributeEDR.size='100%'"></i>
                        <i class="el-icon-copy-document" v-else @click="options.attributeEDR.size='40%'"></i>
                    </span>
        </div>
        <div class="drawer_con" :class="options.footerButton.length>0?'hasFooter':''">
          <div v-if="visible">
            <template v-for="(subWidget, swIdx) in widget.widgetList">
              <template v-if="'container' === subWidget.category">
                <component :is="getComponentByContainer(subWidget)" :widget="subWidget" :key="swIdx"
                           :parent-list="widget.widgetList"
                           :index-of-parent-list="swIdx" :parent-widget="widget">
                  <!-- 递归传递插槽！！！ -->
                  <template v-for="slot in Object.keys($scopedSlots)" v-slot:[slot]="scope">
                    <slot :name="slot" v-bind="scope"/>
                  </template>
                </component>
              </template>
              <template v-else>
                <component :is="subWidget.type + '-widget'" :field="subWidget" :key="swIdx"
                           :parent-list="widget.widgetList"
                           :index-of-parent-list="swIdx" :parent-widget="widget">
                  <!-- 递归传递插槽！！！ -->
                  <template v-for="slot in Object.keys($scopedSlots)" v-slot:[slot]="scope">
                    <slot :name="slot" v-bind="scope"/>
                  </template>
                </component>
              </template>
            </template>
          </div>
        </div>
        <div class="drawer_foo" v-if="options.footerButton.length>0">
          <template v-for="item in options.footerButton">
            <el-button :type="item.type" :size="item.size" @click="clickFooterBtn(item)">
              {{ item.name }}
            </el-button>
          </template>
        </div>
      </el-drawer>

    </div>

  </container-item-wrapper>
</template>

<script>
import emitter from '@/utils/emitter'
import i18n from "../../../utils/i18n"
import refMixin from "../../../components/form-render/refMixin"
import ContainerItemWrapper from './container-item-wrapper'
import containerItemMixin from "./containerItemMixin";
import FieldComponents from '@/components/form-designer/form-widget/field-widget/index'
import {EventBus} from "@/components/javaScript/EventBus";

export default {
  name: "el-drawer-item",
  componentName: 'ContainerItem',
  mixins: [emitter, i18n, refMixin, containerItemMixin],
  components: {
    ContainerItemWrapper,
    ...FieldComponents,
  },
  props: {
    widget: Object,
    fatherData: Object,
  },
  inject: ['refList', 'sfRefList', 'globalModel'],
  data() {
    return {
      dialogModel: {}
    }
  },
  computed: {
    options() {
      return this.widget.options
    },
    visible() {
      let keyArr = this.widget.options.visible.split(".");
      let vi = this.fatherData;
      for (let i = 0; i < keyArr.length; i++) {
        vi = vi[keyArr[i]];
      }
      return vi
    }
  },
  methods: {
    clickFooterBtn(item) {
      EventBus.$emit('childEvent', item.onClick, this.dialogModel, 'dialog');
    },
    close() {
      let keyArr = this.widget.options.visible.split(".");
      let vi = this.fatherData;
      for (let i = 0; i < keyArr.length; i++) {
        if (i !== keyArr.length - 1) {
          vi = vi[keyArr[i]];
        } else {
          vi[keyArr[i]] = false;
        }
      }
      let event = `update:${keyArr[0]}`
      this.$emit(event, this.fatherData[keyArr[0]]);
    }
  },
  watch: {
    visible: {
      handler(v) {
        if (v) {
          let obj = {};
          let loop = (list) => {
            if (list.length > 0) {
              for (let i = 0; i < list.length; i++) {
                let item = list[i];
                if (item.category === "container") {
                  if (item.type === "grid") {
                    loop(item.cols);
                  }

                  if (item.type === "grid-col") {
                    loop(item.widgetList);
                  }
                }
                if (item.type !== "container" && item.type !== "grid" && item.type !== "grid-col") {
                  let o = {};
                  o[item.options.name] = "";
                  Object.assign(obj, o)
                }
              }
            }
          }
          loop(this.widget.widgetList);

          this.dialogModel = obj;

          for (const key in obj) {
            EventBus.$emit("formModel", key, "");
          }
        }
      },
      deep: true,
      immediate: true
    }
  }
}
</script>

<style lang="scss" scoped>
.fullscreen {
  position: absolute;
  top: 0;
  right: 0;
}

.drawer_con {
  height: 100%;
  width: 100%;
  padding: 0 15px;
  box-sizing: border-box;
}

.hasFooter {
  height: calc(100% - 36px - 10px);
  margin-bottom: 10px;
  overflow-y: scroll;
  overflow-x: hidden;

  &::-webkit-scrollbar {
    width: 0;
  }
}

.drawer_foo {
  height: 36px;
  width: 100%;
  text-align: right;
}
</style>
